<div class="panel panel-default row" ng-controller="productListCtrl"
     ng-hide="data.error">
    <div class="col-xs-3">
        <a ng-click="selectCategory()"
           class="btn btn-block btn-default btn-lg">Home</a>
        <a ng-repeat="item in data.products | orderBy:'category' | unique:'category'"
           ng-click="selectCategory(item)" class=" btn btn-block btn-default btn-lg"
           ng-class="getCategoryClass(item)">
            {{item}}
        </a>
    </div>
    <div class="col-xs-8">
        <div class="well"
             ng-repeat="item in data.products | filter:categoryFilterFn | range:selectedPage:pageSize">
            <h3>
                <strong>{{item.name}}</strong>
                <span class="pull-right label label-primary">
                    {{item.price | currency}}
                </span>
            </h3>
            <button ng-click="addProductToCart(item)"
                    class="btn btn-success pull-right">
                Add to cart
            </button>
            <span class="lead">{{item.products}}</span>
        </div>
        <div class="pull-right btn-group">
            <a ng-repeat="page in data.products | filter:categoryFilterFn | pageCount:pageSize"
               ng-click="selectPage($index + 1)" class="btn btn-default"
               ng-class="getPageClass($index + 1)">
                {{$index + 1}}
            </a>
        </div>
    </div>
</div>
